<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05_元素显示模式</title>
    <style>
      /* div默认的宽度是父级宽度的100% 默认高度为0,靠内容撑起来 */
      div {
        background-color: #f00;
        width: 200px;
        height: 200px;
        border: 5px solid #00f;
        /* 表示当前元素为块级元素 可以设置宽高 按照书写顺序从上往下依次排列 */
        display: block;
      }
      span {
        background-color: pink;
        width: 100px;
        height: 100px;
        /* 表示当前元素为行内元素 不能设置宽高 宽高为内容的高度 从左往右排列 */
        display: inline;
        /* 可以修改元素的显示模式*/
        display: block;
      }
      input,button {
          width: 100px;
          height: 100px;
          background-color: #ff0;
          /* 显示模式:行内块 既能像块级元素那样设置宽高,又像行内元素那样横着排 */
          display: inline-block;
      }
      /* 文档流:多个元素按照自己的特性有序排列 块级元素竖着排 行内&行内块元素横着排 */
      .d2 {
          /* 让元素脱离文档流,释放自己原来占有的布局空间 */
          display: none;
      }
    </style>

</head>
<body>
    <div class="d1">111</div>
    <div class="d2">222</div>
    <div class="d3">333</div>
    <hr>
    <span>1234567890</span>
    <span>1234567890</span>
    <span>1234567890</span>
    <hr>
    <input type="text">
    <input type="text">
    <button>按钮</button>

</body>
</html>